import React, { useState, useEffect } from 'react'
import * as api from './server';
import dayjs from './day';
import './css/me.css';

const Me = () => {
    const [user, setUser] = useState([])
    const [newPub, setNewpub] = useState([]);
    useEffect(() => {
        api.getUser('HL1115')
            .then(res => {
                console.log(res.data);
                console.log(res.data.recent_topics)
                setUser(res.data)
                setNewpub(res.data.recent_topics);
            })
    }, [])
    return (
        <div className='me'>
            <header className='welcome'>
                欢迎来到个人中心
            </header>
            <h1>用户名：{user.loginname}</h1>
            <h1>分数： {user.score}分</h1>
            <h1>最新发布</h1>
            <ul className='colItem'>
                {
                    newPub.map(item => {
                        return <li key={item.id}>
                            <span className='title'>{item.title}</span>
                            <span className='time'>{dayjs(item.last_reply_at).fromNow()}</span>
                        </li>
                    })
                }
            </ul>
        </div>
    )
}

export default Me